<template>
  <div class="footer-body" id="pcFooter">
    <div class="footer-content footer-content-pc">
      <div class="footer-tab mobile-top">
        <div class="foottab-block">
          <li class="tabtext" @click="cpryrightBtn">版权声明</li>
          <li class="tabtext" @click="contactBtn">联系我们</li>
          <li class="tabtext noline">合作伙伴</li>
          <div class="clear"></div>
        </div>
      </div>
      <div class="footer-tab pc-bk">
        <div class="footer-block-top">
          <div class="foottab-block">
            <div class="friendly-link-category">
              <div class="link-category-list" @click="checkLink" v-for="(link, index) in linkleft" :data-index="index">
                <div v-if="link.links.length > 0">
                  <div class="link-category-name" v-bind:class="{'active': index === lefttab}">
                    {{link.position}}
                  </div>
                </div>
                <div v-else>
                  <div class="link-category-name" v-bind:class="{'active': index === lefttab}">
                    {{link.position}}
                  </div>
                </div>
              </div>
            </div>
            <div class="friendly-link-list contact" v-if="thisposition === '联系我们'">
              <span class="text">
                国际金融论坛（IFF) 全媒体中心：<br>
                地址：北京市西城区车公庄大街9号五栋大楼A座<br>
                电话：8610-68005887<br>
                电子邮件：info@ifforum.org
              </span>
            </div>
            <div class="friendly-link-list contact" v-else-if="thisposition === '其他'">
              <span class="text">
                国际金融论坛（IFF）欢迎来自社会各界精英的建议和意见，如果您对我们有任何建议和意见，请立即与我们取得联系：E-Mail: iff@iff.org.cn
 <br>
有关职业发展、招聘岗位、交流访问、实习机会等相关事宜，请将您的简历发送至<br>
电子邮件：hr@iff.org.cn
              </span>
            </div>
            <div class="friendly-link-list" v-else>
              <a :href="links.link" v-for="(links, lindex) in linksleft">
                <span>{{links.name}}</span>|
              </a>
            </div>
           <!--  <li class="tabtext" @click="cpryrightBtn">版权声明</li>
            <li class="tabtext" @click="contactBtn">联系我们</li>
            <li class="tabtext">合作伙伴</li>
            <li class="tabtext noline">下载中心</li>
            <div class="clear"></div> -->
          </div>
          <div class="footer-share">
            <div class="friendly-link-category">
              <div class="link-category-list"  v-for="(linkrights, index) in linkright" :data-index="index">
                <div v-if="linkrights.links.length > 0" @click="checkRgLink"  :data-link="linkrights.links[0].link">
                  <div class="link-category-name">
                    {{linkrights.position}}
                  </div>
                </div>
                <div v-else>
                  <div class="link-category-name">
                    {{linkrights.position}}
                  </div>
                </div>
              </div>
            </div>
            <div class="share-qrcode">
              <div class="share-img-list">
                <img src="../../../img/mobile/share-icon-wb.png">
              </div>
              <div class="share-img-list">
                <img src="../../../img/mobile/share-icon-wx.png">
              </div>
              <div class="share-img-text">
                <img style="margin-bottom: 3px;" src="../../../img/mobile/link-foot-share.png">
              </div>
            </div>
            <!-- <span>分享</span>
            <span class="share-icon"><img src="../../../img/mobile/xl.png" alt=""></span>
            <span class="share-icon"><img src="../../../img/mobile/wx.png" alt=""></span>
            <span class="share-icon"><img src="../../../img/mobile/fc.png" alt=""></span>
            <span class="share-icon"><img src="../../../img/mobile/tw.png" alt=""></span> -->
          </div>
        </div>
      </div>
      <div class="footer-copyright" style="display: none;" >
        <img src="../../../img/mobile/footer.jpg">
      </div>
      <div class="footer-copyright">
        <div class="footer-logo">
          <!--<img src="../../../img/mobile/footerlogo.png">-->
        </div>
        <div>
          Copyright © IFF. All screenshots © their respective owners.
        </div>
       <!-- <div>
          上海XX有限公司
        </div>-->
        <div class="record-num">
          <img src="../../../img/mobile/ghs.png" alt="">京ICP备18026906号
          <div>
            版权所有 © 国际金融论坛
          </div>
        </div>
      </div>
    </div>
    </div>
</template>
<script>
import helper from '../../../utils/helper';
import api from '../../../utils/api'
import apiConfig from '../../../utils/apiconfig.js'
export default {
  data() {
    return {
      linkleft: '',
      linkright: '',
      lefttab: 0,
      linksleft: [],
      thisposition: ''
    }
  },
  created() {
    this.getlinklist(0)
  },
  methods: {
    checkLink(e) {
      var linkid = e.currentTarget.dataset.index
      this.linksleft = this.linkleft[linkid].links
      this.thisposition = this.linkleft[linkid].position
      this.lefttab = parseInt(linkid)
    },
    checkRgLink(e) {
      window.open(e.currentTarget.dataset.link)
    },
    cpryrightBtn() {
      this.$router.push('/home/copyright')
    },
    contactBtn() {
      this.$router.push('/home/contactus')
    },
    getlinklist(num) {
      var that = this
      var param = {
        position: 'bottom'
      }
      this.params = param
      api.GET(
        helper.getClientApiUrl(apiConfig.web.footerlink),
        this.params,
        res => {
          that.linkleft = res.left
          that.linkright = res.right
          that.linksleft = that.linkleft[num].links
          that.thisposition = that.linkleft[num].position
          console.log(that.linkright)
          console.log(that.linkleft)
        },
        res => {}
      )
    }
  }
}
</script>
<style>

@media screen and (min-width: 1200px){
  #pcFooter .footer-content{
    margin: 0
  }
  .foottab-block{
    width: 570px
  }
}
</style>
